<template>
  <div id="managementDetail">
    <h1 class="con-right-title">
      <i class="fa fa-reply" @click="cancel"></i>
      官方征集自评活动/查看详情
    </h1>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane
        v-for="(item, index) in tabList"
        :key="index"
        :label="item.label"
        :name="item.name"
      ></el-tab-pane>
    </el-tabs>
    <div class="tab-content">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: 'managementDetail',
  msg: '官方征集自评活动/查看详情-根页面',
  data() {
    return {
      activeName: 'DetFile',
      tabList: [
        { label: '活动档案', name: 'DetFile' },
        { label: '活动展示', name: 'DetShow' },
        { label: '活动规则', name: 'DetERule' },
        { label: '预置用户规则', name: 'DetURule' },
        { label: '触达设置', name: 'DetSet' }
      ]
    }
  },
  watch: {
    $route(newVal, oldVal) {
      this.changeActive()
    }
  },
  mounted() {
    this.changeActive()
  },
  methods: {
    /* tab点击 */
    handleClick(tab, event) {
      let name = 'management' + tab.name
      this.$router.push({ name: name })
    },
    /* 取消 */
    cancel() {
      this.$router.go(-1)
    },
    /* 根据路由，改变tab高亮 */
    changeActive() {
      let name = this.$route.name
      this.activeName = name.replace('management', '')
    }
  }
}
</script>

<style lang="less">
#managementDetail {
  .el-tabs.el-tabs--card.el-tabs--top {
    margin-top: 10px;
  }

  .el-tabs__nav-wrap {
    padding-left: 30px;
  }

  .el-tabs__item {
    height: 30px;
    line-height: 30px;
    font-size: 13px;

    &.is-active {
      color: #0d1636;
      border-top: 2px solid #00d7aa;
      margin-top: -1px;
    }
    &:hover {
      color: #00d7aa;
    }
  }
}
</style>
